<template>
  <el-dialog
    title="设置权限"
    :visible="showDialigPerm"
    @close="hClose"
  >
    <el-tree ref="tree" node-key="id" :data="permList" :props="{label:'name'}" default-expand-all check-strictly show-checkbox />
    <el-button type="primary" @click="getCheckedKeys">确定</el-button>
  </el-dialog>
</template>

<script>
import { getRoleDetails } from '@/api/role'
import { ArrayToTree } from '@/utils/index'
import { getPermissionList, allocationPermission } from '@/api/permission'
export default {
  props: {
    showDialigPerm: {
      type: Boolean,
      required: true
    },
    curId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      permList: []
    }
  },
  created() {
    this.loadPermissionList()
  },
  methods: {
    hClose() {
      this.$emit('update:showDialigPerm', false)
    },
    async loadPermissionList() {
      const res = await getPermissionList()
      //   console.log(res.data)
      //   console.log(ArrayToTree(res.data, 0))
      this.permList = ArrayToTree(res.data, 0)
    },
    async getPermiss() {
      const res = await getRoleDetails(this.curId)
      //   console.log(res)
      //   this.permList = res.data.permIds
      this.$refs.tree.setCheckedKeys(res.data.permIds) // 回显
    },
    async getCheckedKeys() {
      const keys = this.$refs.tree.getCheckedKeys()
      await allocationPermission({ id: this.curId, permIds: keys })
      this.hClose()
    }
  }

}
</script>

<style>

</style>
